<template>
  <div class=''>
    <!-- <div class='h-25 bg-info w-100'>轮播</div> -->
    <carousel></carousel>
    <div id='filmbar' class='row d-flex bg-light justify-content-around sticky-top'>
      <router-link class='mt-3 h5 col-4 text-center' :to='{name: "film"}' tag='div' active-class="film-active">正在热映</router-link>
      <router-link class='mt-3 h5 col-4 text-center' :to='{name: "comming"}' tag='div' active-class="film-active">即将上映</router-link>
    </div>
      <router-view></router-view>
  </div>
</template>

<script>
import carousel from '../components/carousel'

export default {
  components: {carousel},
}
</script>

<style scoped>
.film-active {
  border-bottom: 2px solid orange;
  color: orange;
}
#filmbar {
  height: 4em;
}
</style>